<html>
<head>
    <script src="/jquery-3.3.1.min.js"></script>
    <script src="/jquery.form.js"></script>
    <style>
        #img_to_show:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
<h1>Register!</h1>
<form id="form1" action="/upload" method="post">
    username:<input name="username">
    <br>
    password:<input name="password" type="password">
    <br>
    <input name="photo" type="hidden">
    photo:<input type="file" name="img" onchange="upload_img()" style="display: none">
    <br>
    <img id="img_to_show" width="100px" height="100px" src="http://127.0.0.1:8088/img/default.jpg"
         onclick="select_img()">
    <br>
    <button>register</button>
</form>
</body>
<script>
    function upload_img() {
        // $(表单).ajaxSubmit();
        // 1. 异步上传图片
        $("#form1").ajaxSubmit({
            type: 'post',
            url: '/upload',
            // data:'',
            success: function (path) {
                // 2. 获取上传后的图片路径
                // alert(path)
                // 3. 修改img标签的src路径
                $("#img_to_show").prop("src", path);
                // 4.修改图片路径 表单项的value
                $("input[name='photo']").val(path);
            }
        });
    }

    function select_img() {
        $("input[name='img']").click();
    }

</script>
</html>
